﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/TaskDetail.css" rel="stylesheet" />
<script type="text/javascript">
    
    var required = '<span style="color:red;font-weight:bold" data-qtip="Bắt buộc nhập">*</span>';

    Ext.Loader.setPath('Ext.ux', '/extjs/ux');
    //Ext.Loader.setPath('Ext.ux.superbox', '/extjs/ux/superbox');
    //Ext.Loader.setPath('Ext.ux.boxselect', '/extjs/ux/boxselect');

    Ext.require([
        'Ext.data.*',
        'Ext.grid.*',
        'Ext.ux.DataTip'
        //'Ext.ux.boxselect.BoxSelect'
    ]);

    Ext.define('VTV.TaDMS.Extjs.Model.Task', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'TaskId', mapping: 'TaskId', type: 'int'
        }, {
            name: 'CreateBy', mapping: 'CreateBy', type: 'int'
        }, {
            name: 'TaskName', mapping: 'TaskName', type: 'string'
        }, {
            name: 'TaskType', mapping: 'TaskType', type: 'string'
        }, {
            name: 'StartDate', mapping: 'StartDate', type: 'date'
        }, {
            name: 'EndDate', mapping: 'EndDate', type: 'date'
        }, {
            name: 'ActualEndDate', mapping: 'ActualEndDate', type: 'date'
        }, {
            name: 'Status', mapping: 'Status', type: 'string'
        }, {
            name: 'Descriptions', mapping: 'Descriptions', type: 'string'
        }, {
            name: 'CreateDate', mapping: 'CreateDate', type: 'date'
        }],
        idProperty: 'TaskId'
    });
    
    Ext.define('VTV.TaDMS.Extjs.Model.Employee', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'EmployeeId', mapping: 'EmployeeId', type: 'int'
        }, {
            name: 'DepartmentId', mapping: 'DepartmentId', type: 'int'
        }, {
            name: 'FirstName', mapping: 'FirstName', type: 'string'
        }, {
            name: 'LastName', mapping: 'LastName', type: 'string'
        }, {
            name: 'BirthDate', mapping: 'BirthDate', type: 'date'
        }, {
            name: 'Address', mapping: 'Address', type: 'string'
        }, {
            name: 'MobilePhone', mapping: 'MobilePhone', type: 'string'
        }, {
            name: 'Email', mapping: 'Email', type: 'string'
        }, {
            name: 'Note', mapping: 'Note', type: 'string'
        }],
        idProperty: 'EmployeeId'
    });
    
    Ext.onReady(function () {

        var taskStore = Ext.create('Ext.data.Store', {
            model: 'VTV.TaDMS.Extjs.Model.Task',
            autoLoad: { param: { start: 0, limit: 15 } },
            pageSize: 10,
            proxy: {
                type: 'ajax',
                api: {
                    create: '/api/ApiTask/Create',
                    read: '/api/ApiTask/GetTask',
                    update: '/api/ApiTask/Update',
                    destroy: '/api/ApiTask/Delete'
                },
                reader: {
                    root: 'data',
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'message',
                    totalProperty: 'total'
                },
                writer: {
                    type: 'json',
                    writeAllFields: false
                },
                listeners: {
                    exception: function (proxy, response, operation) {
                        Ext.MessageBox.show({
                            title: 'Lỗi',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            }
        });
        
        var taskDetail = Ext.create('Ext.panel.Panel', {
            autoScroll: true, border: false, region: 'south', split: true, collapsible: true, id: 'taskDetail', height: 350
        });

        var taskTpl = new Ext.XTemplate(
            '<div id="taskDetail-wrapper">',
                '<div class="taskDetail-title">',
                    '<div class="taskDetail-title-right">{TaskName}</div>',
                '</div>',
                '<div class="taskDetail-item">',
                    '<div class="taskDetail-item-left">Người tạo:</div>',
                    '<div class="taskDetail-item-right">{CreateBy} - {CreateDate:date("d/m/Y H:i:s")}</div>',
                '</div>',
                '<div class="taskDetail-item">',
                    '<div class="taskDetail-item-left">Ngày bắt đầu:</div>',
                    '<div class="taskDetail-item-right">{StartDate:date("d/m/Y")}</div>',
                '</div>',
                '<div class="taskDetail-item">',
                    '<div class="taskDetail-item-left">Ngày kết thúc:</div>',
                    '<div class="taskDetail-item-right">{EndDate:date("d/m/Y")}</div>',
                '</div>',
                '<div class="taskDetail-item">',
                    '<div class="taskDetail-item-left">Mô tả:</div>',
                    '<div class="taskDetail-item-right">{Descriptions}</div>',
                '</div>',
            '</div>'
        );
        
        var taskGrid = Ext.create('Ext.grid.Panel', {
            title: 'Danh sách công việc',
            region: 'center',
            store: taskStore,
            emptyText: 'Không có công việc nào được giao cho bạn',
            columns: [{
                text: 'Tên công việc', flex: 1, dataIndex: 'TaskName'
            }, {
                text: 'Loại công việc', width: 170, dataIndex: 'TaskType'
            }, {
                text: 'Ngày bắt đầu', width: 150, dataIndex: 'StartDate', renderer: Ext.util.Format.dateRenderer('d-m-Y')
            }, {
                text: 'Ngày kết thúc', width: 150, dataIndex: 'EndDate', renderer: Ext.util.Format.dateRenderer('d-m-Y')
            }, {
                text: 'Người tạo', width: 150, dataIndex: 'CreateBy'
            }],
            bbar: new Ext.PagingToolbar({
                pageSize: 10,
                store: taskStore,
                displayInfo: true,
                displayMsg: 'Danh sách: từ {0} đến {1}.  Tổng số: {2}',
                emptyMsg: "Không có bản ghi nào"
            }),
            listeners: {
                select: function (record, index, eOpts) {
                    var data = {
                        TaskName: record.lastSelected.get('TaskName'),
                        CreateBy: record.lastSelected.get('CreateBy'),
                        CreateDate: record.lastSelected.get('CreateDate'),
                        StartDate: record.lastSelected.get('StartDate'),
                        EndDate: record.lastSelected.get('EndDate'),
                        Descriptions: record.lastSelected.get('Descriptions')
                    };
                    
                    taskTpl.overwrite(taskDetail.body, data);
                }
            }

        });
        
        Ext.create('Ext.container.Viewport', {
            layout: { type: 'border' },
            items: [taskGrid, taskDetail]
        });
    });
</script>
